<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 出勤统计 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 删选表单 start -->
            <div class="handle-box">
                <!-- 当前老师所属班级 -->
                <el-select v-model="attendVo.attend.klassId" placeholder="考勤班级" class="handle-select mr10">
                    <el-option v-for="klass in klassList" :label="klass.name" :key="klass.id" :value="klass.id">
                    </el-option>
                </el-select>
                <el-date-picker v-model="attendVo.attend.date" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                    placeholder="选择考勤日期">
                </el-date-picker>
                <!-- 用户 -->
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>
            <!-- 删选表单 end -->

            <!-- 表格数据 start -->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="name" label="班级"></el-table-column>
                <el-table-column prop="klassNum" label="应到人数"></el-table-column>
                <el-table-column prop="attendedNum" label="实到人数"></el-table-column>
                <el-table-column prop="lateNum" label="迟到"></el-table-column>
                <el-table-column prop="absenceNum" label="缺勤"></el-table-column>
                <el-table-column prop="date" label="日期"></el-table-column>

            </el-table>
            <!-- 表格数据 end -->

            <!-- 分页区 start -->
            <!-- <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="studentVo.pageNum"
                    :page-size="pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div> -->
            <!-- 分页区 -->
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="attendVo.pageNum"
                    :page-size="3" layout="prev, pager, next, jumper" :page-count="totalPages">
                </el-pagination>
            </div>
            <!-- 分页区 end -->
        </div>
       
    </div>
</template>

<script>
export default {
    name: 'basetable',
    data() {
        return {
            attendVo: {
                attend:{
                    id:'',
                    klassId:'',
                    attendedNum:'',
                    absenceNum:'',
                    lateNum:'',
                    date:'',
                },
                pageNum:1
            },
            attend:{
                    id:'',
                    klassId:'',
                    attendedNum:'',
                    absenceNum:'',
                    lateNum:'',
                    date:''
            },
            klassList: [],
            totalPages: 0,
            tableData: [],
            multipleSelection: [],
            delList: [],
            dialogTableVisible: false,
            TableVisible: false,
            value1: '',
            editVisible: false,
            viewVisible: false,
            form: {},
            token: '',
            idx: -1,
            id: -1
        };
    },

    created() {
        this.getData();
        this.getklassList();
        this.getMsg();
        // this.getklassMsg()
        this.token = {
            token: localStorage.getItem('token')
        };
    },

    methods: {
        // // 获取当前账号信息tableData
        getMsg() {
            this.$axios.get("/auth/admin/getMe").then((r) => {
                console.log(r);
                this.id = r.data.data.id;
                console.log(this.id);
            });
        },
        // // 获取考勤列表数据
        getData() {
            this.$axios.post('/attend/admin/attendlist', this.attendVo).then((r) => {
                this.tableData = r.data.data.data;
                console.log(r)
                // console.log();
                this.totalPages = r.data.data.totalPages;
            });
         },
        // 获取 klassList 数据
        getklassList() {
            this.$axios.get('/attend/admin/getKlassByManagerId').then((r) => {
                this.klassList = r.data.data;
            });
        },
        getName(id){
            for(klass in this.klassList){
                if(klass.id == id){
                    return klass.name;
                }
            }
        },
        // 根据班级id获取班级信息
        // getklassMsg(){
        //     this.klassId = this.attendVo.attend.klassId;
        //     this.$axios.get('/manage/admin/klass/getKlassById/' + this.klassId).then((r) => {
        //         console.log(r)
                
        //     });
        // },
        handleSearch() {
            // this.$options.methods.getData();
            this.getData();
        },
        handleOut(){

        },
        
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },

        // 分页导航
        handleCurrentChange(pageNum) {
            this.attendVo.pageNum = pageNum;
            this.getData();
            console.log(`当前页: ${pageNum}`);
        }

    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.blue {
    color: rgb(247, 115, 1)
}

.green {
    color: rgb(139, 252, 0)
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

/* .goods_img {
    display: block;
    border: black 2px;
    margin-right: 20px;
    float: left;
    width: 150px;
    height: 150px;
} */

.size-icon {
    font-size: 25px;
}
</style>

